


<script>

import mainTableFunction from './mixin/main-table-function'
import superForm from './super-form.vue'
import superTable from './super-table.vue'

export default {
    name: 'super-table-page',
    mixins: [mainTableFunction],
    components: {
        superForm, superTable,
    },

    props: {
        authCheck: {
            type: Function,
            default: function (code) {
                if (this.$default_auth_check) {
                    return this.$default_auth_check(code)
                }
                return true
            },
        },
        autoLoad: {
            type: Boolean,
            default: true,
        },
        search: {
            type: Object,
        },
        action: {
            type: Array,
        },
        actionExtra: {
            type: Array,
        },
        table: {
            type: Object,
        },
        tableVisible: {
            type: Boolean,
            default: true,
        },
        tableVisible: {
            type: Boolean,
            default: true,
        },
        data: {
            type: Array,
        },
    },
    render: function (h) {


        let form_footer = form_footer = h("span", { class: "", slot: "form_footer", style: "display:inline-block;", }, [
            h('el-button', { props: { type: "primary", }, on: { click: this.loadDataForSearch } }, [this.$tt('label_search')]),
            h('el-button', { props: {}, on: { click: this.resetSearch } }, [this.$tt('label_reset')]),
        ])


        return h('div', {
            class: 'table-page-body'
        }, [
            h("div", { class: "search mg_t2" }, [
                h("div", { class: "search-box" }, [
                    this.search ?
                        h(superForm, {
                            class: "search-form", ref: "search",
                            props: Object.assign({ inline: true, inputAttrs: { clearable: true } }, this.search),
                            scopedSlots: _.pick(this.$scopedSlots, ['form_before', 'form_append',
                                ...this.search.model.filter(it => it.slot).map(it => it.slot)]),
                        }, [
                            form_footer
                        ]) : null,
                ]),
                this.$scopedSlots['form-right'] ? this.$scopedSlots['form-right']() : null,
            ]),
            h("div", { class: "action" }, [
                h("div", { class: "action-box" }, [
                    // this.search ? h('el-button', { props: {  }, on: { click: this.resetSearch } }, [this.$tt('label_reset')]) : null,
                    // this.search ? h('el-button', { props: { type: "primary", }, on: { click: this.loadDataForSearch } }, [this.$tt('label_search')]) : null,
                    this._renderActionList(h, this.action),
                    this.$scopedSlots['action-append'] ? this.$scopedSlots['action-append']() : null,
                ]),
                h("div", { class: "action-extra" }, [
                    this.$scopedSlots['action-extra-left'] ? this.$scopedSlots['action-extra-left']() : null,
                    this._renderActionList(h, this.actionExtra),
                    this.$scopedSlots['action-right'] ? this.$scopedSlots['action-right']() : null,
                ]),
            ]),
            this.$scopedSlots['table-top'] ? this.$scopedSlots['table-top']() : null,
            this.table ?
                h(superTable, {
                    ref: "MainTable", class: 'main-table',
                    props: this._propsTable(this.table),
                    on: this.assignFunction({
                        'grid-data-change': this.gridDataChange,
                    }, this.$listeners),
                    scopedSlots: _.pick(this.$scopedSlots, [
                        'table_before', 'table_footer',
                        ...this.table.model.filter(it => it.slot).map(it => it.slot),
                        ...this.table.model.filter(it => it.slot_header).map(it => it.slot_header),
                    ])
                }, []) :
                null,
            // h(),
            // h(),

        ])
    },
    data() {
        return {
            inner_visible: true,
            tableData: this.data,
            lastLoadTime: null,
        }
    },
    mounted: function () {
        this.$nextTick(() => {
            if (this.autoLoad) {
                this.loadDataForSearch()
            }
        })
    },
    watch: {
        data: function (val) {
            this.tableData = val
        },
    },
    methods: {
        _renderActionList(h, actions) {
            if (_.isEmpty(actions)) return null
            return actions.filter(item => this._if(item) && this._authItem(item))
                .map((item, index) => {
                    if (item.render) {
                        return item.render(h, { item })
                    } else if (item.type == 'more') {
                        if (item.list.some(it => this._if(it) && this._authItem(it))) {
                            return h('el-dropdown',
                                {
                                    key: index, class: "mg_l2",
                                    props: Object.assign({ disable: this._disabled(item) }, item.attrs),
                                    on: { command: e => { e && e.click ? e.click(e) : null } },
                                }, [
                                h('el-button',
                                    {
                                        props: Object.assign({ disable: this._disabled(item), }, item.buttonAttrs),
                                    }, [
                                    this._labelBuild(h,item.label),
                                    (<i class="el-icon-arrow-down el-icon--right"></i>)
                                ]),
                                h('el-dropdown-menu', { slot: "dropdown" }, item.list.filter(it => this._if(it) && this._authItem(it))
                                    .map((it, i) => {
                                        return h('el-dropdown-item', {
                                            key: i, props: Object.assign({ disable: this._disabled(it), command: it }, it.attrs),
                                        }, [this._labelBuild(h,it.label)])
                                    })),
                            ])
                        } else {
                            return null
                        }
                    } else {
                        return h('el-button',
                            {
                                key: index,
                                props: Object.assign({ disable: this._disabled(item) }, item.attrs),
                                on: _.pick(item, ['click']),
                            }, [
                            this._labelBuild(h,item.label)
                        ])
                    }
                })
        },
        assignFunction(object, sources) {
            return _.assignWith(object, sources, function (o, s) {
                const newFun = []
                if (o instanceof Array) {
                    newFun.push(...o)
                } else if (o) {
                    newFun.push(o)
                }
                if (s instanceof Array) {
                    newFun.push(...s)
                } else if (s) {
                    newFun.push(s)
                }
                return newFun
            })
        },
        _labelBuild(h,label) {
            if (label instanceof Function) {
                return label(h)
            } else {
                return this.$tt(label)
            }
        },
        _authItem(item) {
            if (item.auth && this.authCheck) {
                return this.authCheck(item.auth)
            }
            return true
        },
        _if(item) {
            if (item == undefined || item.if == undefined) return true
            if (item.if instanceof Function) {
                return item.if()
            }
            return !!item.if
        },
        _disabled(item) {
            if (item.disabled == undefined) return false
            if (item.disabled instanceof Function) {
                return item.disabled()
            }
            return !!item.disabled
        },
        _propsTable(table) {
            let { data, attrs, ...other } = table
            const props_attrs = Object.assign(
                {
                    autoPage: true, autoFlex: true, authCheck: this.authCheck,
                    data: this.tableData, tableVisible: this.tableVisible && this.inner_visible,
                }
                , other, attrs)
            const componentTypeProps = superTable.props
            const props = _.pickBy(props_attrs, (value, key) => componentTypeProps[_.camelCase(key)] != undefined);
            const attrs_new = _.pickBy(props_attrs, (value, key) => {
                return componentTypeProps[_.camelCase(key)] == undefined
            });
            return Object.assign({ attrs: attrs_new }, props, this.$attrs)
        },
        gridDataChange(list) {
            this.tableData = list
        },
        getSearchData() {
            const data = this.$refs['search'] ? this.$refs['search'].getData() : {}
            if (_.isObject(data)) {
                _.keys(data).forEach(k => {
                    if (_.isString(data[k])) {
                        data[k] = _.trim(data[k])
                    }
                })
            }
            return data
        },
        getSearchFormData() {
            const data = this.$refs['search'] ? this.$refs['search'].getFormData() : {}
            if (_.isObject(data)) {
                _.keys(data).forEach(k => {
                    if (_.isString(data[k])) {
                        data[k] = _.trim(data[k])
                    }
                })
            }
            return data
        },
        setSearchData(setdata) {
            if (this.$refs['search']) this.$refs['search'].setData(setdata)
        },
        resetSearch() {
            this.$refs.search.resetFields()
            this.$emit("resetSearch", this.$refs['search'].getData())
        },
        loadDataForSearch() {
            if (this.search && this.$refs.search) {
                this.$refs.search.validate((valid) => {
                    if (valid) {
                        this.$emit("search", this.$refs.search.getFormData())
                        this.loadData(this.$refs.search.getFormData())
                    } else {
                        this.$message.error(this.$tt('tip_search_condition_error'))
                        return false;
                    }
                });
            } else {
                this.$emit("search", null)
                this.loadData()
            }


        },



    }
}
</script>
<style scoped>
.table-page-body {
    /* background-color: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 5px 20px 0 #d9d9d9; */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.search {
    display: flex;
    flex-flow: row;
    /* align-items: center; */
    justify-content: space-between;
    width: 100%;
}

.search-box {
    flex: 1 1 0;
    width: 100%;

}
.search-form {
    width: 100%;

}

.action {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin: 0px 0px 16px 0px;
}

/* .action-box, */
.action-extra {
    /* display: flex;
    flex-flow: row wrap;
    align-items: center; */
    /* display: inline-block; */
    /* flex: 1; */
    float: right;
    text-align: end;
}

.action-box>button.el-button {
    margin-right: 10px;
    margin-left: 0;
    margin-bottom: 2px;
}

.action-extra>button.el-button {

    margin-right: 0;
    margin-left: 10px;
    margin-bottom: 2px;

}
</style>
